<template>
  <div class="fuwenben" :id="'wqFuwenben'+ (fwbDivIndex+1)" >
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import E from "wangeditor"
  export default {
    name: 'fuwenben',
    // props:['content'],
    props:{
      content:{
        type:Object,
        require:true
      },
      fwbDivIndex:{
                type:Object,
                require:true
            }
    },
    data() {
      return {
        content:""
      }
    },
    created() {

    },
    // beforeDestroy() {
    //   const fDiv = document.getElementById(`div${this.fwbDivIndex+1}`);
    //       fDiv.remove();
    // },
    mounted() {
      var that = this
      const wqFuwenben = document.getElementById(`wqFuwenben${this.fwbDivIndex+1}`);
      wqFuwenben.innerHTML=''
      const fDiv = document.createElement('div');
      fDiv.id = `div${this.fwbDivIndex+1}`
      wqFuwenben.appendChild(fDiv)

      const editor = new E(`#div${this.fwbDivIndex+1}`)
      editor.config.height = 250
      editor.config.menus = [
          // 'head',
          'bold',
          'fontSize',
          'fontName',
          'italic',
          'underline',
          'strikeThrough',
          // 'indent',
          'lineHeight',
          'foreColor',
          'backColor',
          'link',
          // 'list',
          // 'todo',
          'justify',
          'quote',
          'image',
          // 'video',
          // 'table',
          // 'code',
          'splitLine',
          'undo',
          'redo',
      ]
      editor.config.colors = [
          '#000000',
          '#eeece0',
          '#1c487f',
          '#4d80bf',
          '#ff0000'
      ]
      editor.config.uploadImgServer = '/upload'
      editor.config.showLinkImg = false
      editor.config.onchange = function(html) {
      	that.content = html
        that.$emit('getcontent',html)
      }
      editor.config.customUploadImg = function(files, insert) {

        let name = that.getRandomChar() + '.' + files[0].name.split('.')[1]

        axios.post(`/api/qiniu/uploadtoken`,{name:name})
          .then(response => {
            if(response.data.msg.code == 0){

              const observer = {
                next(res){
                  console.log(res)
                  // ...
                },
                error(err){
                  console.log(err)
                  // ...
                },
                complete(res){
                  insert('https://gperson.gantanhaokeji.top/'+ res.key)
                }
              }

              const options = {
                quality: 0.7,
                noCompressIfLarger: true,
                maxWidth: 1000,
              }

              qiniu.compressImage(files[0], options).then(data => {
                const observable = qiniu.upload(data.dist,name, response.data.data.token, {}, {})
                const subscription = observable.subscribe(observer) // 上传开始
              })

            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      }
      editor.create()

      if(this.content){
        editor.txt.html(this.content)
      }

    },
    methods: {
      getRandomChar:function(len = 11)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0;i<len;i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      // fabu: function() {
      // 	this.ing = true
      // 	axios.post(`${this.url}/admin/addarticle`,this.all)
      // 	  .then(response => {
      // 	    this.ing = false
      // 	    if(response.data.code == 0){
      //         this.$message.success('发布成功');
      // 	    }else{
      //         this.$message.error(response.data.msg.info);
      //       }
      // 	  })
      // },
    }
  }
</script>


<style scoped lang="less">
  .wenzhang_add{

  }
</style>
<style scoped >
  .wqFuwenben > div {
    width: 100%;
    color: #000;
  }
</style>
